// 地图仓库
import AMapLoader from '@amap/amap-jsapi-loader'
import { App, reactive, getCurrentInstance } from 'vue'
import { AMapConfig } from '@/constants/index'
import { defineStore } from 'pinia'
import Loca from '@vuemap/vue-amap-loca';

let useGMapManage = defineStore('lineMap', {
  state: () => {
    return {
      state: reactive({
        object3Dlayer:null as any,
        overlayGroupPic:null as any,
        overlayGroupLable:null as any,
        aMap: null, // Map类
        map: null, // 地图对象
        mouseTool: null,
      })
    }
  },
  
  actions: {
    async initMap(container: any) {
      await AMapLoader.load({
        ...AMapConfig
      }).then((AMap) => {
        
        this.state.aMap = AMap
        this.state.map = new AMap.Map(container, {
          viewMode: '3D', //地图模式
          terrain: true, //开启地形图
          center: [113.943225499, 22.577673716],
          zoom: 15,
        rotation: 15, //初始地图顺时针旋转的角度Line
        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度

        var loca = new Loca.Container({
            map,
        });

        var pl = window.pl = new Loca.PointLayer({
            zIndex: 10,
            opacity: 1,
            blend: 'normal',
        });

        var geo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/gdp.json',
        });
        pl.setSource(geo);
        var colors = [
            'rgba(254,255,198,0.95)',
            'rgba(255,238,149,0.95)',
            'rgba(255,217,99,0.95)',
            'rgba(255,175,43,0.95)',
            'rgba(255,135,24,0.95)',
            'rgba(234,10,0,0.95)',
            'rgba(195,0,0,0.95)',
            'rgba(139,0,0,0.95)',
        ];
          
        })
        this.state.map.on('click', (e:any)=> {
            // this.state.mouseTool = new AMap.MouseTool(this.state.map)
            // 挂在到全局
              console.log(e,'ddd');
              this.creatPoint(e.lnglat.getLng(),e.lnglat.getLat())
            
            })
        // this.state.mouseTool = new AMap.MouseTool(this.state.map)
        // 挂在到全局
        AMap.plugin(["AMap.ControlBar","AMap.MapType", "AMap.MouseTool"], ()=> {
          //异步同时加载多个插件
          this.state.map.addControl(new AMap.ControlBar()); // 实现默认图层与卫星图,实时交通图层之间切换


        })
        this.creatPoint(113.943225499, 22.577673716)

        this.state.object3Dlayer = new AMap.Object3DLayer({ zIndex: 110, opacity: 1 });
        this.state.map.add(this.state.object3Dlayer);
      }).catch(e => {
        console.log(e)
      })
    },
    creatPoint(x:number,y:number){
        
        var points3D = new this.state.aMap.Object3D.RoundPoints();
        points3D.transparent = true;
        var pointsGeo = points3D.geometry;

        var size = Math.max(10, Math.round(Math.random() * 40));
        var height = -size * 100000;

        // 连线

        pointsGeo.vertices.push(x, y, 0); // 尾部小点
        pointsGeo.pointSizes.push(5);
        pointsGeo.vertexColors.push(0, 0, 1, 1);

        pointsGeo.vertices.push(x, y, height); // 空中点
        pointsGeo.pointSizes.push(size);
        pointsGeo.vertexColors.push(0.029, 0.015, 0.01, 1);


        points3D.borderColor = [0.4, 0.8, 1, 1];
        points3D.borderWeight = 3;
        // this.state.object3Dlayer.add(lines);
        
        this.state.object3Dlayer.add(points3D);
    }
  }
})
export default useGMapManage;

